<template>
	<view :class="type == 1 ? 'bgbox' : ''">
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head" :class="{ 'kaoshi-xcx': type != 1 }">
			<!-- #ifndef MP-WEIXIN -->
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">{{ type == '1' ? '章节练习' : '真题练习' }}</view>
			</view>
			<!--#endif-->
			<view class="kaoshi-head-banner" v-if="type == '1' && practice_record.scale != undefined">
				<view class="kaoshi-user-top-remind-b">
					<view class="kaoshi-user-top-remind-b-view">
						<view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content kaoshi-user-top-h1"
							v-cloak>{{ practice_record.scale || 0 }}
							<view class="kaoshi-remind-title">%</view>
						</view>
						<view>正确率</view>
					</view>
					<view class="kaoshi-user-top-remind-b-view">
						<view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content">
							{{ practice_record.test_num || 0 }}
							<view class="kaoshi-user-top-remind-b-title-p">/{{ practice_record.total }}题</view>
						</view>
						<view>已做题</view>
					</view>
					<view class="kaoshi-user-top-remind-b-view">
						<view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content">
							{{ practice_record.right_num || 0 }}
							<view class="kaoshi-user-top-remind-b-title-p">题</view>
						</view>
						<view>答对</view>
					</view>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
				:up="upOption" height="auto">
				<view class="kaoshi-tiku">
					<block v-for="(item, index) in list" :key="index">
						<view class="kaoshi-tiku-content" :class="item.is_unlock == 0 ? 'lockbg' : ''" @tap="goto_detail(item)">
							<view style="flex: 1;">
								<view class="kaoshi-tiku-content-flex">
									<view class="kaoshi-tiku-content-top">
										<view>{{ item.name }}
											<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
												<image src="../../../static/img/vip.png" mode=""></image>
												<view>VIP</view>
											</view>
										</view>
									</view>
									<view class="kaoshi-tiku-bilv" v-cloak>{{ item.scale || 0 }}
										<view class="kaoshi-remind-title">%</view>
									</view>
								</view>
								<view class="kaoshi-tiku-content-flex">
									<view class="kaoshi-tiku-content-bottom">
										<view class="iconfont icon-dui2"></view>
										<view class="pub-gray">已答题{{ item.test_num }}/{{ item.total_num }}</view>
									</view>
									<view class="pub-gray">正确率</view>
								</view>
							</view>
							<view class="iconfont icon-arrow"></view>
						</view>
					</block>
				</view>
			</mescroll-body>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {
	mapState
} from 'vuex'
import Error from '@/core/untils/error/index';
import authVip from '@/components/authVip.vue'
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0,
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			// 列表数据
			list: [],

			type: '',
			practice_record: {},
			showAuthVip: false, //弹窗
		}
	},
	onShow() {
		if (this.$myUserLogin.getToken()) {
			if (this.type == 1) {
				//获取顶部正确率
				this.get_record();
			}
		}
	},
	onLoad(opts) {
		if (opts && opts.from_type) {
			this.type = opts.from_type
			uni.setNavigationBarTitle({
				title: this.type == 1 ? '章节练习' : '真题练习'
			});
		}
	},
	mounted() {

	},
	computed: {
		...mapState(['subject', "userinfo", 'subjectVip']),
	},
	components: {
		authVip
	},
	methods: {
		/*上拉加载的回调*/
		async upCallback(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			let needLogin = false
			if (this.userinfo.token) {
				needLogin = true
			}

			let res = await this.$myHttp.post({
				url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
				data: {
					subject_id: this.subject.id,
					unit_id: 0,
					page: pageNum,
					limit: pageSize
				},
				needLogin: needLogin
			})
			if (res.code == 1) {
				// 接口返回的当前页数据列表 (数组)
				let curPageData = res.data.data;
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length;
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// let totalPage = data.xxx;
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.total;

				this.mescroll.endBySize(curPageLen, totalSize);
				if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
				this.list = this.list.concat(curPageData); //追加新数据
			} else {
				this.mescroll.endErr()
			}
			// 此处仍可以继续写其他接口请求...
			// 调用其他方法...
		},
		async get_record() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.unitPracticeRecord,
				data: {
					subject_id: this.subject.id,
				},
				needLogin: true
			})
			if (res.code == 1) {
				this.practice_record = res.data
			}
		},
		goto_detail(item) {
			if (item.is_unlock == 0) {
				return
			}
			if (item.total_num == 0) { //如果目录下没有题目，提示用户
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '当前目录下没有题目，请联系老师'
				});
				return
			}
			if (!this.subjectVip && item.is_vip) {
				if (this.$myUserLogin.getToken()) {
					this.showAuthVip = true
					return
				} else {
					Error.errorNotLoggedIn();
					return
				}
			}
			if (this.type == '1') {
				if (item.is_last == 0) {
					//非终极栏目，点击进入下级栏目
					this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=' + this.type +
						'&name=' + item.name)
				} else if (item.is_last == 1) {
					if (this.$myUserLogin.getToken()) {
						//终极栏目，点击进入答题页
						this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' +
							this.type + '&name=' + item.name)
					} else {
						Error.errorNotLoggedIn();
					}
				}
			} else if (this.type == '2') {
				if (this.$myUserLogin.getToken()) {
					//点击进入答题页
					this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this
						.type + '&name=' + item.name)
				} else {
					Error.errorNotLoggedIn();
				}
			}
		}
	}
}
</script>
<style>
.bgbox {
	background-image: linear-gradient(#026aef 0, #fff 180px, #fff 200px, #f9f9f9 230px, #f9f9f9 100%);
	background-repeat: no-repeat;
	background-color: #f9f9f9;
}

.kaoshi-head {
	background: none
}

.kaoshi-head-top {
	color: #fff;
}

.kaoshi-head-top .kaoshi-head-m {
	font-weight: normal;
}

.kaoshi-head-banner {
	background: #fff;
	border-radius: 5px;
	width: 92%;
	margin: 10px auto;
	box-shadow: 0 0 10px rgba(208, 208, 208, 0.5);
	margin-bottom: 18px;
	padding: 16px 0 18px 0;
}

.kaoshi-user-top-remind-b {
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	color: #c5c5c5;
}

.kaoshi-user-top-remind-b-view {
	flex: 1;
}

.kaoshi-user-top-remind-b-title {
	font-size: 18px;
	color: #000;
	padding: 4px 0 6px 0;
}

.kaoshi-remind-title {
	font-size: 13px;
	color: #000;
}

.kaoshi-user-top-remind-b-title-content {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.kaoshi-user-top-remind-b img {
	width: 48px;
	height: 26px;
}

.kaoshi-user-top-h1 {
	font-size: 26px !important;
	padding: 0 !important;
}

/*题库列表*/
.kaoshi-tiku {
	background: #fff;
	width: 93%;
	margin: 0 auto;
	border-radius: 8px;
}

.kaoshi-xcx .kaoshi-tiku {
	width: 100%;
}

.kaoshi-tiku-content {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 16px;
	padding: 14px 14px;
	border-bottom: solid 1px #f5f5f5;
}

.kaoshi-tiku-content-flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.kaoshi-tiku-content .icon-arrow {
	padding-left: 13px;
	color: #b3b3b3;
	font-size: 14px;
}

.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
	padding-bottom: 2px;
}

.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
	font-size: 14px;
}

.kaoshi-tiku-content-top {
	display: flex;
	align-items: center;
}

.kaoshi-tiku-content-top img {
	width: 20px;
	height: 22px;
	margin-right: 10px;
}

.kaoshi-tiku-content-bottom {
	display: flex;
	align-items: center;
}

.kaoshi-tiku-content-flex .icon-dui2 {
	margin: 2px 2px 0 0;
	color: #3c7bfc;
}

.kaoshi-tiku-bilv {
	font-size: 22px;
	color: #000;
	display: flex;
	align-items: baseline;
}

.kaoshi-user-top-remind-b-title-p {
	font-size: 15px;
}

/* #ifdef MP-WEIXIN */
.kaoshi-xcx {
	background: #fff;
	padding-top: 8px;
}

.bgbox {
	padding-top: 8px;
}

/* #endif */

.kaoshi-xcx .kaoshi-head-top {
	color: #000;
}

.kaoshi-xcx {
	background: #fff;
}

.lockbg {
	background: #717171;
	position: relative;
}

.lockbg::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	background-image: url('/static/img/vip.png');
	background-size: cover;
}
</style>
